<template>
    <div style="display:flex;">
        <div class="sub-group">
            <el-button style="margin-left:6px" type="primary" @click="queryAll" round>全部观众</el-button>
            <el-menu v-for="item in subGropData" :default-openeds="openeds" :key="item.id">
                <el-submenu :index="item.id">
                    <template slot="title">
                        <span>{{item.title}}</span>
                    </template>
                    <div v-if="item.hasChild">
                      <el-menu-item v-for="child in item.children"  :class="currentSubGroup != null && currentSubGroup.id == child.id ? 'menu-active' : '' "  :index="child.id" @click="searchGroup(child)" :key="child.id">{{child.title}}</el-menu-item>
                    </div>
                </el-submenu>
            </el-menu>
            <el-button style="margin: 10px 30px;" type="primary" icon="el-icon-plus" @click="openHandleGroupDialog" circle></el-button>
        </div>
        <div class="audience-manage">
            <el-form :inline="true" :model="searchParams" class="search">
              <el-form-item class="custom-input" label="昵称">
                  <el-input v-model="searchParams.nickname" placeholder="查询昵称"></el-input>
              </el-form-item>
              <el-form-item class="custom-input" label="状态">
                  <el-select v-model="searchParams.isvip" placeholder="全部 / VIP / 黑名单">
                      <el-option
                          v-for="item in statusList"
                          :key="item.value"
                          :label="item.name"
                          :value="item.value"
                      ></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item  class="sign-in" label="签到时间">
                  <el-date-picker
                      v-model="searchParams.signDateRange"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                  ></el-date-picker>
              </el-form-item>
              <el-form-item>
                  <el-button
                      round
                      type="primary"
                      size="mini"
                      icon="el-icon-search"
                      class="search-btn"
                      @click="submitSearch"
                  >查询</el-button>
              </el-form-item>
            </el-form>

            <div class="operate-part">
                <div class="selected">
                  <div class="select-all">
                    <span class="text" @click="selectAll">全选</span>
                  </div>
                  <div class="select-reserve">
                    <span class="text" @click="selectReserve">反选</span>
                  </div>
                </div>
                <el-button type="warning" round class="vip-btn" @click="setVip">设为VIP</el-button>
                <el-button type="warning" round class="remove-vip-btn" @click="cancelVip">取消VIP</el-button>
                <el-button round class="black-list-btn" @click="setBlacklist">拉入黑名单</el-button>
                <el-button round class="remove-black-list-btn" @click="cancelBlacklist">移出黑名单</el-button>
                <el-button round type="primary" @click="batchSubGroup">批量分组</el-button>
                <el-button round type="primary" @click="cancelSign">取消签到</el-button>
            </div>
            <div class="sign-in-cloumn" v-for="(card, index) in audienceList" :key="index">
              <el-row class="table-flex">
                <el-col :span="1">
                  <el-checkbox style="padding-left: 10px;" v-model="card.isSelected"></el-checkbox>
                </el-col>
                <el-col class="table-flex" :span="6">
                    <el-avatar :size="50" v-if="card.headimgurl" :src="card.headimgurl"></el-avatar>
                    <el-avatar :size="50" v-else icon="el-icon-user-solid"></el-avatar>
                    <span class="nickname">{{card.nickname}}</span>
                    <i class="iconfont ss-nan male" v-if="card.gender == 1"></i>
                    <i class="iconfont ss-nv female" v-else-if="card.gender == 2"></i>
                </el-col>
                <el-col :span="6" class="text-col">
                    <div>
                        <label class="text-label">签到:</label>
                        <span v-if="card.isqd === 1" class="content-info">
                            {{card.qdtime | datetimeFilter}}
                        </span>
                        <span v-else class="content-info">未签到</span>
                    </div>
                    <div>
                        <label class="text-label">地区：</label>
                        <span>{{card.province}}</span>
                    </div>
                </el-col>
                <el-col :span="6" style="margin: 5px 0px" class="text-col">
                   <div style="margin: 5px 0px" v-for="(val, key, index) in card.qdjson" :key="index">
                        <label class="text-label">{{key}} :</label>
                        <span>{{val}}</span>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="link-dialog">
                        <a @click.stop="openMessageDialog">消息</a>
                        <a @click.stop="openAwardDialog">中奖</a>
                        <a @click="subGroup(card)">分组</a>
                    </div>
                </el-col>
                <el-col :span="2">
                    <i class="iconfont ss-vip1 vip-icon" v-if="card.isvip == 1"></i>
                    <i class="iconfont ss-heimingdan black-list-icon" v-if="card.isvip == 2"></i>
                </el-col>
              </el-row>
            </div>

            <el-pagination
                v-if="totalCount > 0"
                class="pagination-part"
                background
                @current-change="flipPage"
                :current-page.sync="searchParams.currentPage"
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="totalCount"
            ></el-pagination>

            <div class="no-data" v-if="totalCount === 0">
                <img :src="noDataImg" alt="无数据" />
                <div>没有找到符合条件的数据，换个条件试试</div>
            </div>

            <modal
                :visible="showMessage"
                :width="650"
                @close="showMessage = false"
                class="data-modal"
                title="发送消息"
            >
                <div class="content">
                    <el-row type="flex" justify="space-between" class="content-header">
                        <el-col :span="12">
                            <img
                                :src="messageInfo.headimgurl"
                                v-if="messageInfo.headimgurl"
                                class="avatar"
                            />
                            <i class="el-icon-user-solid" v-if="!messageInfo.headimgurl"></i>
                            <span class="nickname">{{messageInfo.nickname}}</span>
                        </el-col>
                        <el-col :span="6" class="data-count">
                            <span>共{{messageInfo.data.length}}条消息</span>
                        </el-col>
                    </el-row>

                    <el-table :data="messageInfo.data" height="250" border style="width: 100%">
                        <el-table-column prop="createTime" label="发送时间" width="180"></el-table-column>
                        <el-table-column prop="content" label="发送内容" width="180"></el-table-column>
                        <el-table-column prop="module" label="上屏模块"></el-table-column>
                        <el-table-column prop="status" :formatter="formatStatus" label="审核状态"></el-table-column>
                    </el-table>

                    <div class="content-footer">
                        <el-button type="primary" plain @click="showMessage = false">关闭</el-button>
                    </div>
                </div>
            </modal>

            <modal
                :visible="showAward"
                :width="850"
                @close="showAward = false"
                class="data-modal"
                title="发送消息"
            >
                <div class="content">
                    <el-row type="flex" justify="space-between" class="content-header">
                        <el-col :span="12">
                            <img
                                :src="awardInfo.headimgurl"
                                v-if="awardInfo.headimgurl"
                                class="avatar"
                            />
                            <i class="el-icon-user-solid" v-if="!awardInfo.headimgurl"></i>
                            <span class="nickname">{{awardInfo.nickname}}</span>
                        </el-col>
                        <el-col :span="6" class="data-count">
                            <span>共{{awardInfo.data.length}}条消息</span>
                        </el-col>
                    </el-row>

                    <el-table :data="awardInfo.data" height="250" border style="width: 100%">
                        <el-table-column prop="sceneName" label="抽奖场景名称" width="80"></el-table-column>
                        <el-table-column prop="awardCode" label="中奖码" width="100"></el-table-column>
                        <el-table-column prop="awardClass" label="奖项"></el-table-column>
                        <el-table-column prop="awardContent" label="奖品"></el-table-column>
                        <el-table-column prop="isReceived" :formatter="formatReceive" label="是否领取"></el-table-column>
                        <el-table-column prop="receiveTime" label="领取时间"></el-table-column>
                        <el-table-column prop="sender" label="发放人"></el-table-column>
                        <el-table-column prop="remark" label="备注"></el-table-column>
                    </el-table>

                    <div class="content-footer">
                        <el-button type="primary" plain @click="showAward = false">关闭</el-button>
                    </div>
                </div>
            </modal>

            <!--用户自定义分组弹窗-->
            <modal :visible="isOpenChoiceGroup" :width="850" :height="200" @close="closeChoiceGroup" class="data-modal" title="分组">
                <div class="content">
                    <el-radio-group v-model="choiceGroup">
                        <el-radio style="margin: 5px 10px;" v-for="item in choiceGroupList" :key="item.id" :label="item" border>{{item.title}}</el-radio>
                    </el-radio-group>
               
                    <div class="content-footer">
                        <el-button type="primary" plain @click="submitChoiceGroup">确认分组</el-button>
                        <el-button type="primary" plain @click="closeChoiceGroup">关闭</el-button>
                    </div>
                </div>
            </modal>

            <!-- 编辑分组弹窗 -->
            <el-dialog class="group-dialog" title="添加分组" @close="closeHandleGroupDialog" :close-on-click-modal="false" :visible.sync="isOpenHandleGroup" width="30%">
                <div style="margin: 0px 0px 10px 140px">
                    <el-button type="primary" plain @click="createGroup">创建</el-button>
                </div>
                <div class="content">
                    <el-row style="padding: 6px 2px;" v-for="(item, index) in groupList" :key="index">
                        <el-col :span="4">组名称</el-col>
                        <el-col :span="14">
                            <el-input v-model="item.groupName"></el-input>
                        </el-col>
                        <el-col :span="4">
                            <el-button style="margin-left: 10px" size="mini" icon="el-icon-minus" @click="removeGroup(index,item)" circle></el-button>
                        </el-col>
                    </el-row>
                </div>
                <span slot="footer" class="dialog-footer">
                    <!-- <span class="err-msg" v-if="errorMsg">{{errorMsg}}</span> -->
                    <el-button @click="closeHandleGroupDialog">取 消</el-button>
                    <el-button type="primary" @click="saveGroup">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import noDataImg from '@/assets/imgs/no_data/no_data.png';
import moment from 'moment';

export default {
    name: 'audienceManage',
    data() {
        return {
            sceneId:this.$route.query.sceneId,
            noDataImg: noDataImg,
            pageSize: 16,
            totalCount: 0,
            // 搜索参数
            searchParams: {
                nickname: '',
                searchStatus: null,
                signDateRange: [],
                currentPage: 1,
            },
            statusList: [
                { name: '全部', value: null },
                { name: 'VIP', value: 1 },
                { name: '黑名单', value: 2 },
            ],
            // 观众信息列表
            audienceList: [],
            messageInfo: {
                data: [],
            },
            awardInfo: {
                data: [],
            },
            showMessage: false,
            showAward: false,
            openeds:[], //默认展开的分组id
            currentSubGroup:'', //存储当前选的分组条件
            isOpenHandleGroup:false, //打开新增，修改，删除组的弹窗
            isOpenChoiceGroup:false, //打开用户选择自定义分组的弹窗
            subGropData: [], //左边的分组查询的分组数据
            groupList: [], //新增和更新的值
            removeGroupList: [], //需要删除的组
            choiceGroup:'', //选中的组
            choiceGroupList:'' //供选择的组的集合
        };
    },

    mounted() {
        this.getList();
        this.querySubGroup();
    },

    methods: {
         /**
         * 打开自定义组的编辑的弹窗
         */
        openHandleGroupDialog(){
            this.isOpenHandleGroup = true;
            this.removeGroupList = [];
            this.queryGroupList();
        },
        /**
         * 关闭自定义组的编辑的弹窗
         */
        closeHandleGroupDialog(){
            this.isOpenHandleGroup = false;
            this.removeGroupList = [];
            this.groupList = [];
        },
        /**
         * 新建组
         */
        createGroup(){
            let group = {id:'',groupName:'',sceneId:this.sceneId};
            this.groupList.push(group);
        },
        /**
         * 删除组
         */
        removeGroup(index,group){
            if(group.id){
                this.removeGroupList.push(group);
            }
            this.groupList.splice(index,1);
        },     
        /**
         * 查询所有的自定义组数据
         */
        queryGroupList(){
            this.$api.get('/diyGroup/queryGroupList',{sceneId:this.sceneId},
            res => {
                this.groupList = res;
            },
            fal => {
                this.$message.error(fal);
            });
        },
        /**
         * 处理组的新增，修改，删除
         */
        saveGroup(){
            let params = {};
            params.addAndUpdateList = this.groupList;
            params.delList = this.removeGroupList;
            this.$api.post('/diyGroup/handleGroup',params,
            res => {
                this.$message.success("操作成功");
                //保存成功之后需要重新查询左边的分组
                this.querySubGroup();
                this.closeHandleGroupDialog();
            },
            fal => {
                this.$message.error(fal);
            });

        },
        /**
         * 打开用户选择自定义分组弹窗
         */
        openChoiceGroup(){
            this.isOpenChoiceGroup = true;
            this.subGropData.forEach(item=>{
                if(item.type ==='diy' && item.hasChild){
                    this.choiceGroupList = item.children;
                }
            })
            console.log(this.choiceGroupList);
        },
        /**
         * 关闭用户选择自定义分组弹窗
         */
        closeChoiceGroup(){
            this.isOpenChoiceGroup = false;
            this.choiceGroup = null;
        },
         /**
         * 批量分组
         */
        batchSubGroup(){
            let selectedUser = [];
            this.audienceList.forEach(item => {
                if(item.isSelected){
                    selectedUser.push(item);
                }
            });
            if(selectedUser.length == 0){
                this.$message.warning("请选择用户数据！");
                return;
            }
            this.openChoiceGroup();
        },
        /**
         * 单个用户分组
         */
        subGroup(user){
            this.openChoiceGroup();
            console.log('user',user);
        },
        /**
         * 提交选择的用户分组数据
         */
        submitChoiceGroup(){
            if(!this.choiceGroup){
                this.$message.error("请选择一个组");
                return;
            }
            let userIds = [];
            let params = {};
           
            this.audienceList.forEach(item => {
                if(item.isSelected){
                    userIds.push(item.id);
                }
            });
            params.sceneId = this.sceneId;
            params.groupId = this.choiceGroup.value;
            params.userIds = userIds;
            this.$api.post('/diyGroup/subGroup',params,
            res => {
                console.log(res);
                this.$message.success("分组成功!");
                this.closeChoiceGroup();
            },
            fal => {
                this.$message.error(fal);
            });
        },
        /**
         * 点击左边的分组进行分组搜索
         */
        searchGroup(child){
            this.currentSubGroup = child;
            this.getList();
        },
        /**
         * 查询分组数据
         */
        querySubGroup(){
            this.$api.get('/ftUserInfo/querySubGroup',{sceneId:this.sceneId},
            res => {
                this.subGropData = res;
                this.subGropData.forEach(item=>{
                    this.openeds.push(item.id);
                });
            },
            fal => {
                this.$message.error(fal);
            });
        },
        queryAll(){
            this.currentSubGroup = null;
            this.searchParams = {
                nickname: '',
                isvip: null,
                signDateRange: [],
                currentPage: 1,
            },
            this.getList();
        },
        /**
         * 分页查询用户数据
         */
        getList() {
            let params = {};
            params.sceneid = this.sceneId;
            params.nickname = this.searchParams.nickname;
            if(this.searchParams.isvip){
                params.isvip = this.searchParams.isvip;
            }
            let signDateRange = this.searchParams.signDateRange; //签到时间
            if(signDateRange !=null && signDateRange.length > 0){
                params.qdtime = signDateRange[0];
                params.qdendtime = signDateRange[1];
            }else{
                params.qdtime = null;
                params.qdendtime = null;
            }
            params.pageSize = this.pageSize,
            params.pageIndex = this.searchParams.currentPage || 1;
            //分组
            if(this.currentSubGroup){
                let type = this.currentSubGroup.type
                if(type ==='live'){
                    params.isqd = Number(this.currentSubGroup.value)
                }
                if(type === 'diy'){
                    params.groupId = this.currentSubGroup.value
                }
            }
            this.$api.post('/ftUserInfo/queryUserList',params,  
                res => {
                    if (res) {
                        this.audienceList = res.result;
                        this.totalCount = res.totalCount;
                        this.audienceList.forEach(item => {
                            this.$set(item, 'isSelected', false);
                            if (item.qdjson && typeof item.qdjson === 'string') {
                                let qdjson = JSON.parse(item.qdjson);
                                //qdjson: "{"mobile":"13899998888","住址":"上海浦东","学历":"本科","email":"cexo@qq.com","realname":"熊思伟"}"
                                for(let key in qdjson){
                                    if(key === 'realname'){
                                        qdjson.姓名 = qdjson[key];
                                         delete qdjson.realname
                                    }
                                    if(key === 'mobile'){
                                        qdjson.手机号 = qdjson[key];
                                        delete qdjson.mobile
                                    }
                                    if(key === 'email'){
                                        qdjson.邮箱 = qdjson[key];
                                        delete qdjson.email
                                    }
                                }
                                item.qdjson = qdjson
                            }
                        });
                        console.log(this.audienceList);
                    }
                },
                fal => {
                    this.$message.error(fal);
                }
            );
        },

        submitSearch() {
            this.searchParams.currentPage = 1;
            this.getList();
        },

        // 获取选中对象id数组及index数组
        getSelectedArray() {
            let idArr = [],
                indexArr = [];
            this.audienceList.forEach((item, index) => {
                if (item.isSelected) {
                    idArr.push(item.unionid);
                    indexArr.push(index);
                }
            });
            return {
                ids: idArr,
                indexs: indexArr,
            };
        },

        // 翻页
        flipPage(val) {
            this.searchParams.currentPage = val;
            this.getList();
        },

        // 全选、反选
        selectAll() {
            this.audienceList.forEach(item => {
                item.isSelected = true;
            });
            this.audienceList = this.audienceList.slice();
        },
        selectReserve() {
            this.audienceList.forEach(item => {
                item.isSelected = !item.isSelected;
            });
            this.audienceList = this.audienceList.slice();
        },

        /**
         * 更新签到记录状态
         * @param {Number} status 状态值
         * @param {String} idStr 多个记录id用','拼接的字符串
         * @param {Function} callback 操作成功后的回调
         */
        updateStatus(status, callback) {
            let selectObj = this.getSelectedArray();
            let idArr = selectObj.ids,
                indexArr = selectObj.indexs;
            if (idArr.length > 0) {
                this.$api.post(
                    '/ftUserInfo/updateVip',
                    {
                        sceneid: this.$route.query.sceneId,
                        unionid: idArr.join(','),
                        isvip: status,
                    },
                    response => {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                        });
                        callback(indexArr);
                    },
                    fal => {
                        this.$message.error(fal);
                    }
                );
            } else {
                this.$message({
                    message: '请选择操作对象',
                    type: 'warning',
                });
            }
        },

        // 设为vip、取消vip
        setVip() {
            this.updateStatus(1, indexArr => {
                indexArr.forEach(i => {
                    this.audienceList[i].isvip = 1;
                });
            });
        },
        cancelVip() {
            this.updateStatus(0, indexArr => {
                indexArr.forEach(i => {
                    this.audienceList[i].isvip = 0;
                });
            });
        },

        // 加入黑名单、取消黑名单
        setBlacklist() {
            this.updateStatus(2, indexArr => {
                indexArr.forEach(i => {
                    this.audienceList[i].isvip = 2;
                });
            });
        },
        cancelBlacklist() {
            this.updateStatus(0, indexArr => {
                indexArr.forEach(i => {
                    this.audienceList[i].isvip = 0;
                });
            });
        },
        // 取消签到
        cancelSign() {
            let selectObj = this.getSelectedArray();
            let idArr = selectObj.ids,
                indexArr = selectObj.indexs;
            if (idArr.length > 0) {
                this.$api.post(
                    '/ftUserInfo/updateQd',
                    {
                        sceneid: this.$route.query.sceneId,
                        unionid: idArr.join(','),
                        isqd: 0,
                    },
                    response => {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                        });
                        indexArr.forEach(i => {
                            this.audienceList[i].isqd = 0;
                        });
                        // 删除元素
                        // this.audienceList = this.audienceList.filter((item, index) => {
                        //   return !indexArr.includes(index);
                        // })
                    },
                    fal => {
                        this.$message.error(fal);
                    }
                );
            } else {
                this.$message({
                    message: '请选择操作对象',
                    type: 'warning',
                });
            }
        },

        openMessageDialog() {
            this.showMessage = true;
            const dataItem = {
                createTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                content:
                    '尊敬的用户，您好。你已成功订购我司增值服务，有效期至2019-12-31. 退订回复TD',
                module: '签到模块',
                status: 1,
            };
            let data = [];
            for (let index = 0; index < 10; index++) {
                let item = JSON.parse(JSON.stringify(dataItem));
                item.content += index;
                item.status = index % 2;
                data.push(item);
            }
            this.messageInfo = {
                headimgurl: 'imgs/fj.jpg',
                nickname: '忌你太美',
                data: data,
            };
        },

        openAwardDialog() {
            this.showAward = true;
            const dataItem = {
                sceneName: '开门红第一期',
                awardCode: '',
                awardClass: '人气奖',
                awardContent: '洗衣机一台',
                isReceived: '',
                receiveTime: '',
                sender: '刘总',
                remark: '请到一楼前台领取奖品。',
            };
            let data = [];
            for (let index = 0; index < 10; index++) {
                let item = JSON.parse(JSON.stringify(dataItem));
                item.awardCode = new Date().getTime() + index;
                if (index % 3 === 0) {
                    item.isReceived = true;
                    item.receiveTime = moment()
                        .subtract(index, 'hour')
                        .format('YYYY-MM-DD HH:mm:ss');
                }
                data.push(item);
            }
            this.awardInfo = {
                headimgurl: 'imgs/fj.jpg',
                nickname: '忌你太美',
                data: data,
            };
        },

        formatStatus(row, column, cellValue) {
            if (cellValue === 0) {
                return '审核通过';
            } else if (cellValue === 1) {
                return '审核不通过';
            }
        },

        formatReceive(row, column, cellValue) {
            if (cellValue) {
                return '是';
            } else {
                return '否';
            }
        },
    },
};
</script>

<style lang="scss">
.sub-group {
    width: 18%;
    border-right: 1px solid #ccc;
    .el-submenu__title {
        padding-left: 15px !important;
        font-weight: bold;
    }
    .el-submenu .el-menu-item {
        min-width: 120px;
    }
    .menu-active{
        border-left:#409EFF 5px solid; 
    }
    .el-menu-item.is-active {
       color: rgb(7, 7, 7)
    }
}

.audience-manage {
    width: 100%;
    height: 100%;
    margin-left: 3%;
    .sign-in-cloumn{
      width: 100%;
      height: 100%;
      background: #FFFFFF;
      border: 1px solid #D8D8D8;
      border-radius: 10px;
      margin: 5px 0px;
      .nickname{
        padding-left: 5px
      }
      .male{
        padding-left: 5px;
        color:#409EFF;
      }
      .female{
        padding-left: 5px;
        color:#f56c6c;
      }
      .text-col{
        font-size: 12px;
      }
      .text-label{
        color: #909399;
      }
      .black-list-icon{
        font-size: 40px;
        color: #f56c6c;
      }
      .link-dialog{
        display: grid;
        padding-top: 5px;
        font-size: 14px;
        font-weight: bold;
        a{
            color: #409EFF;
            text-decoration:underline;
            :hover{
                color:#bbb;
            }
        }
      }
      .vip-icon{
        font-size: 40px;
        color: #EEDC82;
      }
    }
    .custom-input{
      .el-input__inner{
        width: 150px;
      }
    }
    .sign-in{
      .el-input__inner{
        width: 250px;
      }
    }
    .el-button--text {
        &:hover span {
            text-decoration: underline;
        }
    }

    .search {
        border-bottom: 1px solid #ccc;

        .el-date-editor .el-range-separator {
            min-width: 24px;
        }
    }

    .operate-part {
        margin: 10px 0;
        .selected {
          display: inline-flex;
          cursor: pointer;
          .select-all{
            height: 0px;
            width: 60px;
            color: #eee;
            border-top: 32px solid #409EFF;
            border-right: 17px solid transparent;
            position: relative;
            top: 28px;
            :hover{
              color:#000;
            }
            .text{
              position: relative;
              top: -27px;
              left: 8px;
            }
          }
          .select-reserve{
            height: 0px;
            width: 60px;
            color: #eee;
            border-bottom: 32px solid #67C23A;
            border-left: 17px solid transparent;
            position: relative;
            top: 28px;
            left: -13px;
            :hover{
              color:#000;
            }
            .text{
              position: relative;
              top: 4px;
              left: 3px;
            }
          }
        }
        .remove-vip-btn{
          color: #E6A23C;
          background: #fff;
        }
        .black-list-btn{
          background-color: #000;
          color: #eee;
        }
        .remove-black-list-btn{
          border-color: #000;
          font-weight: bold;
        }
    }

    .pagination-part {
        text-align: center;
    }

    .data-modal {
        .content {
            padding: 20px;

            .content-header {
                line-height: 30px;

                & > .el-col:first-child {
                    display: flex;
                }

                .avatar {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                }

                .nickname {
                    margin-left: 10px;
                    font-size: 12px;
                }

                .data-count {
                    font-size: 12px;
                    text-align: right;
                }
            }

            .el-table {
                margin: 20px 0;
            }

            .content-footer {
                text-align: center;

                .el-button {
                    padding-left: 30px;
                    padding-right: 30px;
                }
            }
        }
    }

    .no-data {
        display: flex;
        padding: 20px;
        margin: 20px;
        flex-direction: column;
        align-items: center;

        img {
            width: 200px;
        }

        div {
            font-size: 14px;
            color: #bbb;
            margin-top: 20px;
        }
    }
}
.table-flex{
    @include flex;
}
.group-dialog{
    .el-dialog__body{
        padding: 5px 20px
    } 
}
</style>